<template>
    <button
        @click="emitClick"
        :class="[
            'my-button',
            `btn-${type}`,
            showShadow ? 'btn-shadow' : ''
        ]"
    >
        <slot></slot>
    </button>
</template>
<script>
const typeMap = [
    'default',
    'primary',
    'success',
    'danger',
    'warning'
]


export default {
    name: 'YUButton',
    mounted() {
        console.log(this.$attrs);
    },
    emits: ['click'],
    props: {
        type: {
            type: String,
            default: 'default',
            validator(value) {
                return typeMap.includes(value)
            }
        }
    },
    data() {
        return {
            showShadow: this.$YuUI.btnShadow
        }
    },
    mounted() {
        console.log(this.showShadow)
    },
    methods: {
        emitClick(event) {
            this.$emit('click', event)
        }
    },
}
</script>
<style lang="scss">
.my-button {
    height: 34px;
    border: none;
    padding: 0 16px;
    border-radius: 3px;
    &.btn-default {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    &.btn-primary {
        background-color: #409eff;
        color: #fff;
    }

    &.btn-success {
        background-color: #67c23a;
        color: #fff;
    }

    &.btn-danger {
        background-color: #f56c6c;
        color: #fff;
    }

    &.btn-warning {
        background-color: #e6a23c;
        color: #fff;
    }

    &.btn-shadow {
        box-shadow: 1px 3px 5px #666;
    }
}
</style>